React 前端开发 (2) - 列表,事件

列表 & Key

render() {
  return (
    <ul>
      {this.state.todoList.map((item, id) => {
        return <Todo name={item} key={id} />;
      })}
    </ul>
  );
}

event 监听

// input 事件: 将 input 值存储到 state 中
handleInputChange(e) {
  const target = e.target;
  const value = target.type === "checkbox" ? target.checked : target.value;
  const name = target.name;

  this.setState({
    [name]: value,
  });
}

<input type="text" name="todo" id="todo" value={this.state.todo} onChange={(e) => this.handleInputChange(e)}></input>

// 按钮事件: 定义一个函数, 监听按钮点击操作
deleteItem(id) {
  console.log("delete id: ", id, "list: ", this.state.todoList);
  this.state?.todoList.splice(id, 1);

  this.setState({ todoList: this.state.todoList });
}

<button onClick={() => this.deleteItem(id)}>x</button>

// submit 事件
handleSubmit(e) {
  // 阻止触发默认表单事件
  e.preventDefault(e);

  // 对表单事件的处理: 这里是将数据加入到 state 中, 也可以请求 api 等
  if (this.state.todo !== "") {
    const newTodoList = this.state.todoList.concat(this.state.todo);
    this.setState({ todoList: newTodoList, todo: "" });
  }
}
<form onSubmit={(e) => this.handleSubmit(e)}></form>

总结

1. ul, li 中 li 必须有 key 字段, 一般可指定数据库 id 等内容
2. 表单一般将表单数据在交互时都存储于 state 中: e.target.{name, type, value}
3. 在事件中拿到数据, 需要 onClick = (e) => this.handler(e, 其他数据)
4. 阻止表单默认内容提交: e.preventDefault(e)